<template>
    <div>
        <div class='diatitle' style='margin: 10px 0'>图片上传</div>
        <el-upload ref="uploadMutiple" :action="imgUpload.url" :headers="imgUpload.headers" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-change='imgchange' :file-list="fileList"
            multiple :on-success="getupload">
            <i class="el-icon-plus"></i>
        </el-upload>
        <div id="preview" @paste="handlePaste">
            <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处 将图片按Ctrl+V 粘贴至此处</span>
        </div>
        <el-dialog :visible.sync="innerVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <div @click='getImgUrl'>提交</div>
    </div>
</template>

<script>
//--------导入token
import { getToken } from "@/utils/auth";
export default {
    components: {},
    data() {
        return {
            upurl: 'https://api110', //上传的地址
            myData: {
                key: 'Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO'
            },

            imgUpload: {
                // 设置上传的请求头部
                headers: {
                    Authorization: "Bearer " + getToken()
                },
                // 图片上传的方法地址:
                url: process.env.VUE_APP_BASE_API + "/common/upload",
            },
            //上传时附带的额外参数
            fileList: [], //上传的文件列表
            dialogImageUrl: '',
            innerVisible: false,
            upload_list: [], //提交的图片数组
        };
    },
    mounted() { },
    methods: {
        handlePaste(event) {
            const items = (event.clipboardData || window.clipboardData).items;
            let file = null;
            if (!items || items.length === 0) {
                this.$message.error("当前浏览器不支持本地");
                return;
            }
            // 搜索剪切板items
            for (let i = 0; i < items.length; i++) {
                if (items[i].type.indexOf("image") !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
            }
            if (!file) {
                this.$message.error("粘贴内容非图片");
                return;
            }
            if (this.fileList.length >= this.limit) {
                this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
                return
            }
            this.$refs.uploadMutiple.handleStart(file); // 将粘贴过来的图片加入预上传队列
            this.$refs.uploadMutiple.submit(); // 提交图片上传队列
        },
        //上传
        imgchange(file, fileList) {
            this.fileList = fileList
            console.log('成功', file, fileList, this.fileList)
            console.log(JSON.stringify(file));
            console.log(JSON.stringify(fileList));
        },
        //on-remove 文件列表移除文件时的钩子
        handleRemove(file, fileList) {
            console.log(this.fileList, this.file)
            this.fileList = fileList
            var index = this.upload_list.indexOf(file.url)
            console.log(index)
            this.upload_list.splice(index, 1);
        },
        //on-preview 点击文件列表中已上传的文件时的钩子(预览图片弹窗)
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.innerVisible = true;
        },
        // 提交时打印
        getImgUrl() {
            console.log(this.upload_list)
        },
        // 上传成功之后push到数组
        getupload(res, file, fileList) {
            console.log(JSON.stringify(res));
            console.log(JSON.stringify(file.response.fileName));
            // this.upload_list.push(res.info.url)
            // console.log(this.upload_list)
        },
    },
};
</script>
<style lang="scss" scoped></style>
